<style>
    .form-horizontal .form-group{margin-right: -50px;}
    .col-sm-9{padding-right: 0;}
	.tm .btn { margin-bottom:5px;}
</style>
<ul class="nav nav-tabs">
	<li ng-class="{'active':pagedata.op=='list'}"><a href="javascript:;" ng-click="access('list')">系统模板列表</a></li>
	<li ng-class="{'active':pagedata.op=='mylist'}"><a href="javascript:;" ng-click="access('mylist')">自定义模板列表</a></li>
	<li class="active"><a href="javascript:;" ng-click="access()">设计</a></li>
</ul>
<div class="page-content">
    <div class="row form-horizontal form-validate">
        <div class="col-sm-8">
		<div class="form-group">
			<label class="col-xs-12 col-sm-3 col-md-2 left-label" >模板名称</label>
			<div class="col-sm-9 col-xs-12">
				<input type="text" id="title" name="title" ng-model="pagedata.item.title"  class="form-control" value="{{pagedata.item.title}}"/>
			</div>
		</div>
		<div class="form-group">
			<label class="col-xs-12 col-sm-3 col-md-2 left-label" >模板标识</label>
			<div class="col-sm-9 col-xs-12">
				<input type="text" id="name" name="name" ng-model="pagedata.item.name"  class="form-control" value="{{pagedata.item.title}}" ng-readonly="pagedata.item.id"/>
				<span class='help-block'>格式例如：mass2fans 填写后不可修改</span>
			</div>
		</div>
		<div class="form-group">
					<label class="col-xs-12 col-sm-3 col-md-2 left-label">设置客服消息内容</label>
					<div class="col-sm-9 col-xs-12">
						<textarea id="kefumsg" name="kefumsg" ng-model="pagedata.item.kefumsg" style="height: 150px;resize: none;" class="form-control" placeholder='支持<a href=""></a>标签' >{{pagedata.item.kefumsg}}</textarea>
						<div class="edit" style="width: 100%;height: 30px;border-bottom:1px solid #e5e6e7;border-left:1px solid #e5e6e7;border-right:1px solid #e5e6e7;">
							<div style="width: 30px;height: 30px;float: left;margin-left: 20px">
								<a href="javascript:" id="link" title="插入链接">
									<img src="../addons/jy_weishop/images/link.png" width="18px" height="18px" style="margin-top: 7px;">
								</a>
							</div>
						</div>
					</div>
		</div>
				<div class="form-group">
					<label class="col-xs-12 col-sm-3 col-md-2 left-label" >模板消息ID</label>
					<div class="col-sm-9 ">
						<input type="text" ng-model="pagedata.item.template_name"  id="template_name" name="template_name" class="form-control" ng-model="pagedata.item.template_name" placeholder="模版消息ID，例：OPENTM205984119"/>
						<span class='help-block'>从微信公众号-模板消息库获取！ </span>
					</div>
				</div>
				<div class="form-group">
					<label class="col-xs-12 col-sm-3 col-md-2 left-label" >头部标题</label>
					<div class="col-sm-8 title" style='padding-right:0' >
						<textarea name="first" id="first" class="form-control" ng-model="pagedata.item.first" data-rule-required='true' rows="5"></textarea>
						<span class='help-block'>对填充模板 first.DATA 的值 </span>
					</div>
					<div class="col-sm-1" style='padding-left:0;' >
						<input type="color" name="firstcolor" ng-model="pagedata.item.firstcolor" style="width:32px;height:32px;" />
					</div>
				</div>
			   <div ng-repeat="k in pagedata.item.keywords" class="form-group">
					<label class="col-xs-12 col-sm-3 col-md-2 left-label" >{{k.title}}</label>
					<div class="col-sm-8 title" style="padding-right:0">
						<input id="keyword{{$index+1}}" type="text" class="form-control" ng-model="k.value" data-rule-required='true' placeholder="{{k.value}}" />
						<span class='help-block'>对应填充模板keyword{{$index+1}}.DATA的值 </span>
					</div>
				</div>
				<div class="form-group">
					<label class="col-xs-12 col-sm-3 col-md-2 left-label" >低部标题</label>
					<div class="col-sm-8 title" style='padding-right:0' >
						<textarea name="footer" id="footer" class="form-control" ng-model="pagedata.item.footer" data-rule-required='true' rows="5"></textarea>
						<span class='help-block'>对填充模板 remark.DATA 的值 </span>
					</div>
					<div class="col-sm-1" style='padding-left:0;' >
						<input type="color" name="footercolor" ng-model="pagedata.item.footercolor" style="width:32px;height:32px;" />
					</div>
				</div>
	</div>
	<div class="col-sm-4" style="max-width:350px;">
		<div class="shilidiv"  >
            <div class="panel panel-default">
                <div class="panel-heading">
                    模板展示:
                </div>
                <div class="panel-body">
                    <div id="shili" class="text">
					<textarea class="form-control look-text" style="background:#fff" ng-model="pagedata.item.tmp" placeholder="模板展示，例：新配送任务通知</br>订单编号：[订单号]</br>下单时间：[下单时间]</br>您有新的配送订单！请及时处理！点击“详情”查看订单信息。" ng-readonly="pagedata.item.tmp"></textarea>
                    </div>
                </div>
            </div>
        </div>
		<div class="shilidiv">
            <div class="panel panel-default">
                <div class="panel-heading">
                    微信原型:
                </div>
                <div class="panel-body">
                    <div id="shili" class="text">
					<textarea class="form-control look-text" style="background:#fff" ng-model="pagedata.item.demo" placeholder="微信原型，例：{{first.DATA}}\n订单编号：{{keyword1.DATA}}\n下单时间：{{keyword2.DATA}}\n{{remark.DATA}}" ng-readonly="pagedata.item.demo"></textarea>
                    </div>
                </div>
            </div>
        </div>
        <div class="">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <select class="form-control" ng-model="pagedata.item.typegroup">
						<option value="" selected>选择模板变量类型</option>
						<option ng-repeat="op in pagedata.msgtpl_tags" ng-if="$index>0" ng-selected="pagedata.item.typegroup==$index" value="{{$index}}">{{op.title}}</option>
					</select>
                </div>
                <div class="panel-body tm tm-upgrade">
                    <a ng-repeat="item in pagedata.msgtpl_tags[pagedata.item.typegroup].data" href='JavaScript:' class="btn btn-default btn-sm" style="margin-left:3px">{{item.name}}</a>
                </div>
                <div class="panel-body">
                    点击变量后会自动插入选择的文本框的焦点位置，在发送给粉丝时系统会自动替换对应变量值
                    <div class="text text-danger">
                        注意：以上模板消息变量只适用于系统类通知，会员群发工具不适用
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<div class="modal-sub"><button class="btn btn-primary" href="javascript:" ng-click="post(pagedata.item,'post')">提交</button></div>
</div>
<script language='javascript'>
scope.pagedata.uptmp=function(){
					var keywords=scope.pagedata.item.keywords
					scope.pagedata.item.first=scope.pagedata.item.first?scope.pagedata.item.first:'模板消息头部'
					var tmp=scope.pagedata.item.first+'\n'
					for (i = 0; i < keywords.length; i++) {
						var num = i+1
						keywords[i].title=keywords[i].title?keywords[i].title:'关键词标题'
						keywords[i].value=keywords[i].value?keywords[i].value:'关键词内容'
						tmp +=keywords[i].title+'：'+keywords[i].value+'\n'
					}
					scope.pagedata.item.footer=scope.pagedata.item.footer?scope.pagedata.item.footer:'模板消息底部';
					tmp +=scope.pagedata.item.footer
					scope.pagedata.item.tmp=tmp
					scope.$evalAsync();
}
scope.pagedata.uptmp();
 $(function () {
        require(['jquery.caret'],function(){
            var jiaodian;
            $(document).on('focus', 'input,textarea',function () {
                jiaodian = this;
            });

            $("a[href='JavaScript:']").click(function () {
                if (jiaodian) {
                    $(jiaodian).insertAtCaret("["+this.innerText+"]" );
					scope.pagedata.item.first=$("#first").val();
					scope.pagedata.item.footer=$("#footer").val();
					var keywords=scope.pagedata.item.keywords
					for (i = 0; i < keywords.length; i++) {
						var num = i+1
						scope.pagedata.item.keywords[i].value=$("#keyword"+num).val();
					}
					scope.pagedata.uptmp();					
                }
            })

        })
    })

</script>
<script>
    require(['jquery','util'], function($, util){
        $(function(){
            $('#btn').click(function(){
                util.emojiBrowser(function(emoji){
                    var text = '[U+'+emoji[0].text+']';
                    var content = $('#kefumsg').val()+text;
                    $('#kefumsg').val(content);

                });
            });
        });

        $(function(){
            util.emotion($('#emotion'), $('#kefumsg'));
        });

        $(function () {
            $('#link').click(function () {
                var link='<a href=\\"您要插入的链接\\">链接文字</a>';
                var content = $('#kefumsg').val()+link;
                $('#kefumsg').val(content);
            });
        });
    });
</script>
